<template>
    <!-- 条件设置框 -->
    <el-drawer :append-to-body="true" title="条件设置" :visible.sync="showBranch" direction="rtl" class="condition_copyer" size="550px" :before-close="saveCondition"> 
        <select v-model="priority" class="priority_level">
            <option v-for="(item,index) in priorityList" :value="index+1" :key="index">优先级{{index+1}}</option>
        </select>
        <div class="demo-drawer__content">
            <div class="condition_content drawer_content">
                <p class="tip">当审批单同时满足以下条件时进入此流程</p>
                <el-button type="primary" @click="conditionVisible=true">添加条件</el-button>
                <div class="list" v-for="(item,index) in checkList" :key="item">
                  <div class="list_cen">
                    {{item}}
                  </div>
                  
                  <i class="el-icon-circle-close closeCond" @click="delCheck(index)"></i>
                </div>
            </div>   
            <!-- 新增条件弹框 -->
            <el-dialog title="选择条件" :visible.sync="conditionVisible" width="480px" append-to-body class="condition_list">
                <p>请选择用来区分审批流程的条件字段</p>
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="条件1"></el-checkbox>
                  <el-checkbox label="条件2"></el-checkbox>
                  <el-checkbox label="条件3"></el-checkbox>
                </el-checkbox-group>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="conditionVisible = false">取 消</el-button>
                    <el-button type="primary" @click="sureCondition">确 定</el-button>
                </span>
            </el-dialog>
            <div class="demo-drawer__footer clear">
                <el-button type="primary" @click="saveCondition">确 定</el-button>
                <el-button @click="showBranch=false">取 消</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

import { getConditions } from '@/plugins/api.js'
export default {
    components: {
        
    },
    props:['showInd','parentNode','nodeInfo','ind'],
    data() {
        return {
            conditionVisible: false,
            conditionsConfig: {
                conditionNodes: [],
            },
            conditionConfig: {},
            PriorityLevel: "",
            conditions: [],
            conditionList: [],
            checkedList: [],
            conditionRoleVisible: false,

            priority:'1',
            priorityList:0,
            checkList:[],
            showBranch:false
        }
    },
    computed: {
        ...mapState(['tableId', 'conditionsConfig1', 'conditionDrawer']),
    },
    watch: {
      showInd(newVal){
        console.log(this.parentNode,'----------1111111------------')
        if(newVal==this.ind){
          this.showBranch = true
        }else{
          this.showBranch = false
        }
        if(this.parentNode.children){
          this.priorityList = this.parentNode.children.length
          this.priority = this.ind+1
        }
      }
    },
    mounted(){
      console.log(this.showBranch,'----------------showBranch-------------')
    },
    methods: {
        ...mapMutations(['setCondition', 'setConditionsConfig']),
        
        saveCondition(){
          console.log(this.nodeInfo, '----------------nodeInfo----------------')
          let checkText = this.checkList.join(',')
          console.log(checkText,'--------------checkText-----------')
          // console.log(this.parentNode.children,'-----------交换了嘛-----------')
          this.$emit('condFun',this.priority,checkText)
          this.closeDrawer()
        },
        closeDrawer() {
          this.$emit('hideBranch',-1)
        },
        sureCondition() {
          this.conditionVisible=false
        },
        delCheck(index) {
          this.checkList.splice(index,1)
        },
        
    }
}
</script>

<style lang="less" scoped >
.condition_copyer {
    .el-drawer__body {
        .priority_level {
            position: absolute;
            top: 11px;
            right: 30px;
            width: 100px;
            height: 32px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(217, 217, 217, 1);
        }
    }

    .condition_content {
        padding: 20px 20px 0;

        p.tip {
            margin: 20px 0;
            width: 510px;
            text-indent: 17px;
            line-height: 45px;
            background: rgba(241, 249, 255, 1);
            border: 1px solid rgba(64, 163, 247, 1);
            color: #46a6fe;
            font-size: 14px;
        }

        ul {
            max-height: 500px;
            overflow-y: scroll;
            margin-bottom: 20px;

            li {
                &>span {
                    float: left;
                    margin-right: 8px;
                    width: 70px;
                    line-height: 32px;
                    text-align: right;
                }

                &>div {
                    display: inline-block;
                    width: 370px;

                    &>p:not(:last-child) {
                        margin-bottom: 10px;
                    }
                }

                &:not(:last-child)>div>p {
                    margin-bottom: 20px;
                }

                &>a {
                    float: right;
                    margin-right: 10px;
                    margin-top: 7px;
                }

                select,
                input {
                    width: 100%;
                    height: 32px;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 4px;
                    border: 1px solid rgba(217, 217, 217, 1);
                }

                select+input {
                    width: 260px;
                }

                select {
                    margin-right: 10px;
                    width: 100px;
                }

                p.selected_list {
                    padding-left: 10px;
                    border-radius: 4px;
                    min-height: 32px;
                    border: 1px solid rgba(217, 217, 217, 1);
                    word-break: break-word;
                }

                p.check_box {
                    line-height: 32px;
                }
            }
        }

        .el-button {
            margin-bottom: 20px;
        }
    }
}

.condition_list {
    .el-dialog__body {
        padding: 16px 26px;
    }

    p {
        color: #666666;
        margin-bottom: 10px;

        &>.check_box {
            margin-bottom: 0;
            line-height: 36px;
        }
    }
}
.list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
}
.closeCond{
  font-size: 18px;
  cursor: pointer;
  color: #46a6fe;
}
</style>